<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>后台管理 - 易买网</title>
    <link type="text/css" rel="stylesheet" href="../css/style.css"/>
    <script type="text/javascript" src="../scripts/jquery-1.8.3.min.js"></script>
    <script type="text/javascript" src="../scripts/function.js"></script>
    <!-- 后期引入   -->
    <script type="text/javascript" src="../plugins/axios/axios.min.js"></script>
    <script type="text/javascript" src="../scripts/request.js"></script>
    <link rel="stylesheet" href="../plugins/element-ui/element-ui.css">
</head>
<body>
<div id="app">
    <div id="header" class="wrap">
        <div id="logo"><img src="../images/logo.gif"/></div>
        <div class="help"><a href="../index.html">返回前台页面</a></div>
        <div class="navbar">
            <ul class="clearfix">
                <li><a href="index.html">首页</a></li>
                <li><a href="user.html">用户</a></li>
                <li class="current"><a href="product.html">商品</a></li>
                <li><a href="order.html">订单</a></li>
                <li><a href="guestbook.html">留言</a></li>
                <li><a href="news.html">新闻</a></li>
            </ul>
        </div>
    </div>
    <div id="childNav">
        <div class="welcome wrap">
            管理员{{ userId }}您好，今天是{{ time }}，欢迎回到管理后台。
        </div>
    </div>
    <div id="position" class="wrap">
        您现在的位置：<a href="index.html">易买网</a> &gt; 管理后台
    </div>
    <div id="main" class="wrap">
        <div id="menu-mng" class="lefter">
            <div class="box">
                <dl>
                    <dt>用户管理</dt>
                    <dd><a href="user.html">用户管理</a></dd>
                    <dt>商品信息</dt>
                    <dd><em><a href="productClass-add.html">新增</a></em><a href="productClass.html">分类管理</a></dd>
                    <dd><em><a href="product-add.html">新增</a></em><a href="product.html">商品管理</a></dd>
                    <dt>订单管理</dt>
                    <dd><a href="order.html">订单管理</a></dd>
                    <dt>留言管理</dt>
                    <dd><a href="guestbook.html">留言管理</a></dd>
                    <dt>新闻管理</dt>
                    <dd><em><a href="news-add.html">新增</a></em><a href="news.html">新闻管理</a></dd>
                </dl>
            </div>
        </div>
        <div class="main">
            <h2 style="cursor: pointer" onclick="window.location.href='productClass.html'">添加分类</h2>
            <div class="manage" v-loading="loading">
                <form action="#" @submit.prevent="addSubCategories">
                    <table class="form">
                        <tr>
                            <td class="field">父分类：</td>
                            <td>
                                <select v-model="subCategories.parentId" name="parentId">
                                    <option v-for="item in parentCategories" :key="item.id" :value="item.id" >
                                        {{ item.name }}
                                    </option>
                                </select>
                            </td>
                        </tr>
                        <tr>
                            <td class="field">分类名称：</td>
                            <td><input type="text" class="text" name="className" v-model="subCategories.name"/></td>
                        </tr>
                        <tr>
                            <td></td>
                            <td><label class="ui-blue"><input type="submit" name="submit" value="更新"/></label></td>
                        </tr>
                    </table>
                </form>
            </div>
        </div>
        <div class="clear"></div>
    </div>
    <div id="footer">
        Copyright &copy; 2013 北大青鸟 All Rights Reserved. 京ICP证1000001号
    </div>
</div>
<script type="text/javascript" src="../plugins/vue/vue.js"></script>
<script type="text/javascript" src="../api/common.js"></script>
<script type="text/javascript" src="../api/parentCategories.js"></script>
<script type="text/javascript" src="../api/subCategories.js"></script>
<script type="text/javascript" src="../plugins/element-ui/element-ui.js"></script>
<script type="text/javascript">
    axios.get("/user/getStatus")
    const app = new Vue({
        el: '#app',
        data: {
            loading: false,
            userId: getUserInfo().userId,
            time: getFormattedDate(),
            parentCategories:[],
            subCategories: {
                parentId: '1',
                name:''
            }

        },
        async mounted() {
            await this.getParentCategories()
        },
        methods: {
            async getParentCategories(){
                this.loading = true
                const list = await getParentCategoriesList()
                this.parentCategories = list.data
                this.loading = false
            },
            async addSubCategories(){
                this.loading = true
                const add = await addSubCategoriesApi(this.subCategories)
                const code = add.code
                if (code === 1){
                    this.$message({
                        showClose: true,
                        message: add.data,
                        type: 'success'
                    });

                    this.loading = false
                    setTimeout(async =>{
                        window.location.href='productClass.html'
                    }, 800)
                }else {
                    this.$message({
                        showClose: true,
                        message: '已存在此类，添加失败',
                        type: 'error'
                    });
                    this.loading = false
                }
            }
        }
    })
</script>
</body>
</html>
